window.addEventListener('load', function() {
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var wrap = document.querySelector('.wrap');


    wrap.addEventListener('mouseenter', function() {
        left.style.display = 'block';
        right.style.display = 'block';
        clearInterval(timer)
        timer = null;
    })
    wrap.addEventListener('mouseleave', function() {
        left.style.display = 'none';
        right.style.display = 'none';
        timer = setInterval(function() {
            right.click();
        }, 2000);
    })

    // 动态生成圆点
    var ul = wrap.querySelector('ul');
    var ol = wrap.querySelector('ol');
    var wrapWidth = wrap.offsetWidth;
    for (var i = 0; i < ul.children.length; i++) {
        // 创建节点
        var li = document.createElement('li');
        // 插入节点
        ol.appendChild(li);
        // 设置自定义属性
        li.setAttribute('index', i);
        // 绑定点击事件
        li.addEventListener('mouseover', function() {
            // 排他思想
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'on';
            // 点击圆圈移动图片，ul
            //animate(obj,target,callback)
            // 获取轮播区域宽度

            var index = this.getAttribute('index');
            num = index;
            circle = index;
            // console.log(index);
            // 拿到索引号
            // console.log(wrapWidth);
            animate(ul, -index * wrapWidth);
        })

    }
    // 设置当前类名
    ol.children[0].className = 'on';
    // 克隆第一张图片
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 点击右侧按钮，滚动图片
    var num = 0;
    var circle = 0;
    var flag = true;
    right.addEventListener('click', function() {
        if (flag) {
            flag = false;
            // 无缝滚动
            if (num == ol.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * wrapWidth, function() {
                flag = true; //打开节流阀
            });
            // 点击按钮使圆圈相应变化
            circle++;
            // 排他思想
            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
        }

    });

    // 左侧按钮
    left.addEventListener('click', function() {
        if (flag) {
            flag = false;
            // 无缝滚动
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * wrapWidth + 'px';
            }
            num--;
            animate(ul, -num * wrapWidth, function() {
                flag = true;
            });
            // 点击按钮使圆圈相应变化
            circle--;
            // 排他思想
            // if (circle < 0) {
            //     circle = ol.children.length - 1;
            // }
            circle = circle < 0 ? ol.children.length - 1 : circle;
            circleChange();
        }

    })

    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'on';
    }

    // 自动播放
    var timer = setInterval(function() {
        right.click();
    }, 2000);
    // 节流阀，防止轮播过快（回调函数）


})